import React, { useEffect, useState } from 'react'
import {
  PageHeader,
  Steps,
  Button,
  Form,
  Input,
  Select,
  message,
  notification,
} from 'antd'
import style from './NewsAdd.module.css'
import axios from 'axios'
import NewsEditor from '../../../components/news-manage/NewsEditor'
const { Step } = Steps
const { Option } = Select

export default function NewsUpdate(props) {
  const [next, setNext] = useState(0)
  const [categoryList, setcategoryList] = useState([])
  const [formInfo, setFormInfo] = useState({})
  const [content, setContent] = useState('')
  const [form] = Form.useForm()
  useEffect(() => {
    axios.get('/categories').then((res) => {
      // console.log(res.data);
      setcategoryList(res.data)
    })
  }, [])
  useEffect(() => {
    const { id } = props.match.params
    axios.get(`/news/${id}?_expand=role&_expand=category`).then((res) => {
      //   console.log(res.data);
      //   setNews(res.data);
      let { title, categoryId, content } = res.data
      setContent(content)
      form.current.setFieldsValue({
        title,
        categoryId,
      })
      setContent(content)
    })
  }, [props.match.params, form])
  // 保存草稿箱
  const handleSave = (auditState) => {
    axios
      .patch(`/news/${props.match.params.id}`, {
        ...formInfo,
        content: content,
        auditState: auditState,
      })
      .then((res) => {
        props.history.push(
          auditState === 0 ? '/news-manage/draft' : '/audit-manage/list'
        )

        notification.info({
          message: `通知`,
          description: `你可以到${
            auditState === 0 ? '草稿箱' : '审核列表'
          }中查看您的新闻`,
          placement: 'bottomRight',
        })
      })
  }
  // 下一步
  const handleNext = () => {
    if (next === 0) {
      form
        .validateFields()
        .then((res) => {
          // console.log(res);
          setFormInfo(res)
          setNext(next + 1)
        })
        .catch((err) => {
          console.log(err)
        })
    } else {
      if (content === '' || content.trim() === '<p></p>') {
        message.error('新闻内容不能为空')
      } else {
        setNext(next + 1)
      }
    }
  }
  // 上一步
  const handlePrevious = () => {
    setNext(next - 1)
  }

  const StepsList = [
    {
      id: 1,
      title: '基本信息',
      description: '新闻标题, 新闻分类',
    },
    {
      id: 2,
      title: '新闻内容',
      description: '新闻主题内容',
    },
    {
      id: 3,
      title: '新闻提交',
      description: '保存草稿或者提交审核',
    },
  ]
  return (
    <div>
      <PageHeader title="更新新闻" onClick={() => props.history.goBack()} />
      <Steps current={next}>
        {StepsList.map((item) => {
          return (
            <Step
              key={item.id}
              title={item.title}
              description={item.description}
            />
          )
        })}
      </Steps>

      <div style={{ marginTop: '50px' }}>
        <div className={next === 0 ? '' : style.active}>
          <Form form={form} name="control-hooks">
            <Form.Item
              name="title"
              label="新闻标题"
              rules={[
                {
                  required: true,
                  message: '请输入新闻标题',
                },
              ]}
            >
              <Input placeholder="请输入新闻标题" />
            </Form.Item>
            <Form.Item
              name="categroyId"
              label="新闻分类"
              rules={[
                {
                  required: true,
                  message: '请选择新闻类型',
                },
              ]}
            >
              <Select placeholder="请选择新闻类型">
                {categoryList.map((item) => {
                  return (
                    <Option key={item.id} value={item.id}>
                      {item.title}
                    </Option>
                  )
                })}
              </Select>
            </Form.Item>
          </Form>
        </div>
        <div className={next === 1 ? '' : style.active}>
          <NewsEditor
            content={content}
            getContent={(value) => {
              setContent(value)
            }}
          />
        </div>
        <div className={next === 2 ? '' : style.active}></div>
      </div>

      <div style={{ marginTop: '50px' }}>
        {next === 2 && (
          <>
            <Button
              type="primary"
              onClick={() => handleSave(0)}
              style={{ marginRight: '5px' }}
            >
              保存草稿箱
            </Button>
            <Button
              type="primary"
              onClick={() => handleSave(1)}
              style={{ marginRight: '5px' }}
            >
              提交审核
            </Button>
          </>
        )}
        {next < 2 && (
          <Button
            type="primary"
            style={{ marginRight: '5px' }}
            onClick={handleNext}
          >
            下一步
          </Button>
        )}
        {next > 0 && (
          <Button style={{ marginRight: '5px' }} onClick={handlePrevious}>
            上一步
          </Button>
        )}
      </div>
    </div>
  )
}
